<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>医生端控制台</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
    <div class="container-fluid">
      <a class="navbar-brand fw-semibold d-flex align-items-center gap-2" href="#dashboard">
        <i class="bi bi-hospital"></i> 医生端控制台
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#dashboard">总览</a></li>
          <li class="nav-item"><a class="nav-link" href="#patients">患者</a></li>
          <li class="nav-item"><a class="nav-link" href="#bmd">骨密度</a></li>
          <li class="nav-item"><a class="nav-link" href="#prescriptions">运动处方</a></li>
          <li class="nav-item"><a class="nav-link" href="#reminders">用药提醒</a></li>
          <li class="nav-item"><a class="nav-link" href="#reports">进度报告</a></li>
          <li class="nav-item"><a class="nav-link" href="#screening">筛查问卷</a></li>
          <li class="nav-item"><a class="nav-link" href="#" onclick="openPredictSidebar()"><i class="bi bi-graph-up"></i> 数据预测</a></li>
        </ul>
        <ul class="navbar-nav ms-3 align-items-center">
          <li class="nav-item dropdown">
            <a class="nav-link position-relative" href="#" id="notifToggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="提醒">
              <i class="bi bi-bell"></i>
              <span id="notifBadge" class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle p-1 px-2 small">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" id="notifMenu"></ul>
          </li>
          <li class="nav-item dropdown ms-2">
            <a class="nav-link position-relative" href="#" id="msgToggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="消息">
              <i class="bi bi-chat-dots"></i>
              <span id="msgBadge" class="badge rounded-pill bg-primary position-absolute top-0 start-100 translate-middle p-1 px-2 small">2</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" id="msgMenu"></ul>
          </li>
          <li class="nav-item dropdown ms-2">
            <a class="nav-link d-flex align-items-center gap-2" href="#" data-bs-toggle="dropdown">
              <i class="bi bi-person-circle fs-5"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><h6 class="dropdown-header">当前用户</h6></li>
              <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#profileModal"><i class="bi bi-person"></i> 个人中心</a></li>
              <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#settingsModal"><i class="bi bi-gear"></i> 设置</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="hero">
    <div class="container py-4 py-md-5">
      <div class="row align-items-center g-4">
        <div class="col-12 col-md-7">
          <h1 class="display-6 display-md-5 fw-bold mb-2 text-white">精准随访与决策支持</h1>
          <p class="text-white-50 mb-3">一站式管理患者骨密度、处方与用药依从性，提升门诊管理效率。</p>
          <div class="d-flex gap-2 flex-wrap">
            <a class="btn btn-light btn-sm" href="#patients"><i class="bi bi-people me-1"></i>患者列表</a>
            <a class="btn btn-outline-light btn-sm" href="#bmd"><i class="bi bi-graph-up me-1"></i>骨密度趋势</a>
            <a class="btn btn-outline-light btn-sm" href="#prescriptions"><i class="bi bi-clipboard2-pulse me-1"></i>运动处方</a>
          </div>
        </div>
        <div class="col-12 col-md-5 text-md-end">
          <div class="hero-stats card card-glass p-3 p-md-4">
            <div class="d-flex align-items-center gap-3">
              <i class="bi bi-activity text-light fs-2"></i>
              <div class="text-white-50 small">实时概览</div>
            </div>
            <div class="progress mt-3" role="progressbar" aria-label="加载">
              <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 100%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <main class="container my-4">
    <div id="content"></div>
  </main>

  <footer class="footer border-top py-3">
    <div class="container d-flex justify-content-between small text-muted">
      <span>© 2025 医生端控制台</span>
      <span>Demo 数据仅用于展示</span>
    </div>
  </footer>

  <!-- Profile Modal -->
  <div class="modal fade" id="profileModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">个人中心</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex align-items-center gap-3">
            <i class="bi bi-person-circle fs-1 text-primary"></i>
            <div>
              <div class="fw-semibold">Demo 医生</div>
              <div class="text-muted small">骨质疏松专科</div>
            </div>
          </div>
          <hr />
          <div class="row g-2 small">
            <div class="col-6">账号：demo_doctor</div>
            <div class="col-6">科室：内分泌科</div>
            <div class="col-12">邮箱：doctor@example.com</div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-bs-dismiss="modal">知道了</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Settings Modal -->
  <div class="modal fade" id="settingsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">系统设置</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">API 基地址</label>
            <input id="apiBaseUrlInput" class="form-control" placeholder="例如：https://example.com" />
            <div class="form-text">不含路径，前端将请求 /api/doctor/dashboard</div>
          </div>
          <div class="mb-3">
            <label class="form-label">鉴权 Token（可选）</label>
            <input id="apiTokenInput" class="form-control" placeholder="Bearer Token" />
            <div class="form-text">保存后将以 Authorization: Bearer {token} 发送</div>
          </div>
          <hr/>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="settingDark" />
            <label class="form-check-label" for="settingDark">深色模式（演示）</label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="settingEmail" checked />
            <label class="form-check-label" for="settingEmail">邮件通知</label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="settingSms" />
            <label class="form-check-label" for="settingSms">短信通知</label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button id="settingsSaveBtn" class="btn btn-primary" data-bs-dismiss="modal">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Offcanvas: 患者数据预测侧边栏 -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="predictSidebar" aria-labelledby="predictLabel" style="width:460px">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="predictLabel">患者数据预测</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="mb-3">
        <label class="form-label">选择患者</label>
        <select id="predictPatientSelect" class="form-select"></select>
      </div>
      <div class="mb-3">
        <label class="form-label">预测类型</label>
        <select id="predictType" class="form-select">
          <option value="tScore">未来T分数变化</option>
          <option value="fracture">骨折风险评估</option>
          <option value="adherence">用药依从性预测</option>
          <option value="exercise">运动效果预测</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">预测时间范围</label>
        <select id="predictPeriod" class="form-select">
          <option value="3m">3个月</option>
          <option value="6m">6个月</option>
          <option value="1y">1年</option>
        </select>
      </div>
      <div class="d-flex gap-2">
        <button class="btn btn-primary" onclick="runPrediction()">运行预测</button>
        <div id="predictStatus" class="text-muted small"></div>
      </div>
      <hr/>
      <div id="predictOutput" class="small"></div>
      <div class="small text-muted mt-2">提示：基于现有数据与统计模型进行预测，仅供参考。</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="api.js"></script>
  <script src="app.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
